import { defineComponent, ref, inject } from 'vue'
import questionTypes, { getAllName } from '@/enum/questionEnum'
import type { questionSideListState, questionSideState } from '@/types/baseConfig'
// import Draggable from '@/components/nComponents/Draggable'
import Draggable from 'vuedraggable'
import { NTabs, NTabPane, NCollapse, NCollapseItem } from 'naive-ui'
import pageStyle from '../styles/index.module.scss'

export default defineComponent({
  emits: ['add'],
  setup(props, { emit }) {
    const $clone = inject('$clone') as <T>(data: T) => T
    const questions: any = ref<questionSideState[]>($clone(questionTypes))
    const defaultExpandedname = getAllName()

    const onAdd = (e: questionSideListState) => {
      emit('add', $clone(e))
    }
    return () => (
      <>
        <div class={pageStyle.movingAslide}>
          <NTabs class="tabs" default-value="oasis" justify-content="space-evenly" type="line">
            <NTabPane class="tabs-item" name="oasis" tab="组件库">
              <div class="has-scrollbar">
                <div class="nano-content">
                  <div class="groupList">
                    <NCollapse
                      class="group w-full"
                      arrow-placement="right"
                      default-expanded-names={defaultExpandedname}
                    >
                      {questions.value.map((item: questionSideState) => (
                        <NCollapseItem
                          name={item.name}
                          v-slots={{
                            header: () => (
                              <div class="cell">
                                <div class="title u-line-1">{item.type}</div>
                              </div>
                            ),
                            default: () => (
                              <>
                                <Draggable
                                  list={item.list}
                                  group={{ name: 'question', pull: 'clone', put: false }}
                                  animation="300"
                                  sort={false}
                                  class="ul"
                                  item-key="type"
                                >
                                  {{
                                    item: ({ element }: { element: questionSideListState }) => (
                                      <li
                                        class="widgetLi press-down"
                                        draggable="true"
                                        onClick={() => onAdd(element)}
                                      >
                                        <div class="widgetItem">
                                          <i class={`esayIcon ${element.icon}`}></i>
                                          <span>{element.label}</span>
                                          {element.label_alias && (
                                            <span>-{element.label_alias}</span>
                                          )}
                                        </div>
                                      </li>
                                    )
                                  }}
                                </Draggable>
                              </>
                            )
                          }}
                        ></NCollapseItem>
                      ))}
                    </NCollapse>
                  </div>
                </div>
              </div>
            </NTabPane>
            <NTabPane class="tabs-item" name="beatles" tab="表单模板">
              Hey Jude
            </NTabPane>
          </NTabs>
        </div>
      </>
    )
  }
})
